<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东秒杀移动端</title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
		<link type="text/css" rel="stylesheet" href="css/style.css" />
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			//				传京东后台数据
//              $(
//              	function(){
//              		window.onscroll = function(){
//              			if(document.documentElement.scrollTop || document.body.scrollTop>88){
//              				$(".nav .nav_miaosha").css("position","fixed").css("top","0px");
//              			}else{
//              				$(".nav .nav_miaosha").css("position","");
//              			}
//              			
//              			var st = document.documentElement.scrollTop;
//              			var ch = document.documentElement.clientHeight;
//              			
//              			$(".newimg").each(
//              				function(){
//              					var imgtop = $(this).offset().top;
//              					if(imgtop>st&&imgtop<st+ch-50){
//              						$(this)[0].className = "oldimg";
//              						$(this).attr("src",$(this).attr("src2"));
//              					}
//              					
//              				}
//              			);
//              		};
//              	}
//              );


                var dataId;
//              var words = ["","精选","食品","母婴","酒饮","清洁"];
                var jdurl = "https://img13.360buyimg.com/n7/";
                
                function jddata(data){
                	var datas;
                	for(var d in data){
                	datas = data[d];
                	}
//              	$(".nav .tab:nth-of-type("+(dataId)+")").html("");
                	for(var i=0;i<datas.length;i++){
                		var d = datas[i];
                		var newp = document.createElement("p");
                		newp.innerHTML = d.ad_title;
                		console.log(newp.innerHTML);
//              		console.log(d.ad_title);
                		$(".tab .good-list .skill-title .title").text(newp);
                		$("#protemp .pic .skill-pic").find("img").attr("src",jdurl+d.image_url);
                	}
//              	document.documentElement.scrollTop = 1;
                }
                
                
		</script>
		<script class="jdscript" src="https://x.jd.com/Search?callback=jddata&area=1&enc=utf-8&keyword=iphone&adType=7&page=2&ad_ids=291%3A33&xtest=new_search&_=1516261707892"></script>
	</head>
	<body>
		<div class="common-header">
			<div class="jd-header">
				<div class="jd-header-bar">
					<div class="return">
						<span></span>
					</div>
					<div class="jd-header-title">京东秒杀</div>
					<div class="message">
						<span></span>
					</div>
				</div>
			</div>
		</div>
		<div class="nav">
		<ul class="nav_miaosha clearfix">
			<li>
				<p>16:00</p>
				<p>秒杀中</p>
			</li>
			<li>
				<p>18:00</p>
				<p>即将开场</p>
			</li>
			<li>
				<p>20:00</p>
				<p>即将开场</p>
			</li>
			<li>
				<p>22:00</p>
				<p>即将开场</p>
			</li>
			<li>
				<p>00:00</p>
				<p>即将开场</p>
			</li>
		</ul>
		</div>
		<div class="skill-hot">
			<div class="list-head clearfix">
				<span class="fl">秒杀中 先下单先得哦</span>
				<span class="time fr">
					<span class="time-span fl">距结束</span>
					<div class="daojishi fl">
						<span class="hour" id="timer1">01</span>
						<span class="maohao">:</span>
						<span class="hour" id="timer2">01</span>
						<span class="maohao">:</span>
						<span class="hour" id="timer3">01</span>
					</div>
				</span>
			</div>
			<div class="tab">
				<ul class="good-list" id="protemp">
					<li>
						<a href="#" class="clearfix">
							<div class="skill-pic fl">
								<div class="mask">秒杀完</div>
								<div class="pic">
									<img src="//m.360buyimg.com/mobilecms/s220x220_jfs/t13279/73/1121952561/258515/3e58ea24/5a1a9585N92c1cf3a.jpg!q70.jpg;" />
								</div>
							</div>
							<div class="skill-title fl">
								<div class="title">恒源祥（HYX）保暖内衣 男士加绒加厚德绒保暖内衣套装厚款棉秋衣秋裤男套装 男-麻兰（藏青） 男175/100(XL)</div>
								<div class="price">
									<div class="newprice clearfix">
										<span class="fl">￥</span>79
										<span class="btn_gomiaosha fr">去秒杀</span>
									</div>
									<div class="oldprice clearfix">
										<del class="fl">&yen;199</del>
										<div class="jingdutiao fr">
											<span class="sale fl">
												已秒
												<em>30%</em>
											</span>
											<div class="tiao fr">
												<span class="tiao1">
													
												</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div style="height: 1000px;"></div>
		<script>
			$(start);
			
			function start(){
//				鼠标点击秒杀导航的效果
				$(".nav_miaosha li").click(
					function(){
						$(this).find("p").css({"color":"#f23030","margin-top":"5px"});
						$(this).find("p:first").css("font-size","46px");
						
						$(".nav_miaosha li:first p:first").css({"color":"black","font-size":"34px"});
						$(".nav_miaosha li:first p:last").css({"color":"black","font-size":"22px"});
					}           
				);
				
				
				
				
				
//              Tab切换
//              $(".nav_miaosha li").click(
//              	function(){
//              		var index = $(this).index;
//              		var $current_tab = $(this).parents(".nav");
//              		$current_tab.find(">:last-child>*").hide();
//              		$current_tab.find(">:last-child>:nth-of-type("+(index+1)+")").show();
//              		
//              		loadData(index+1);
//              	}
//              );
//              loadData(1);
//			};
//			
//			function loadData(id){
//				dataId = id;
//				$(".javascript").remove();
//				var jdscript = document.createElement("script");
//				jdscript.src = "https://x.jd.com/Search?callback=jddata&area=1&enc=utf-8&keyword="+words[id]+"&adType=7&page=2&ad_ids=291%3A33&xtest=new_search&_=1516261707892";
//				jdscript.className = "jdscript";
//				document.body.appendChild(jdscript);
//			}
			
            
            
            
            
            
            //时间倒计时
            var timer = document.getElementById("timer");
            var time = new Date(2018,1,22,23,00,00);
			var timer;
			function f(){
				var now = new Date();
				var c = time.getTime() - now.getTime();
				if(c<0){
					clearInterval(timer);
					d1.innerHTML = "活动已经结束啦！";
					return;
				}
				var hour = Math.floor(c/(1000*60*60))%24;
				hour = hour < 10 ? "0" + hour:hour;
				var minute = Math.floor(c/(1000*60))%60;
				minute = minute < 10 ? "0" + minute:minute;
				var second = Math.floor(c/1000)%60;
				second = second < 10 ? "0" + second:second;
				
				timer1.innerHTML = hour;
				timer2.innerHTML = minute;
				timer3.innerHTML = second;
			}
			f();
			timer = setInterval(f,1);
			
		}
		</script>
	</body>
</html>
